<template>
  <div class="header">
    <!-- <img class="logo" src="../../static/img/logo.png" mode="widthFix">
    <div class="search-btn">
      <img class="search-icon" src="../../static/img/shousuo.png" mode="widthFix">
      <div class="search-word">请输入您想要的宝贝</div>
    </div> -->
    <div class="tabs-nav" v-if="componentContent.category && componentContent.category.length !==0">
      <ul class="ul">
        <li class="li" :class="{'on':activeTab===0}" @click="tabChange(0)">首页</li>
        <li class="li" :class="{'on':activeTab===index+1}" v-for="(item,index) in componentContent.category" :key="index" @click="tabChange(index+1,item.id)">
          <!--<router-link :to="{name:'category',params:{classifyData:item}}">-->
            {{item.categoryName}}
          <!--</router-link>-->
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import {funMixin} from '../../config/mixin'
  import { mapGetters } from 'vuex'
  export default {
    name: 'cereHeader',
    mixins: [funMixin],
    props: {
      componentContent: {
        type: Object
      }
    },
    data () {
      return {
        activeTab: 0
      }
    },
    computed: {
      ...mapGetters([
        'viewDevice'
      ])
    },
    methods: {
      tabChange (index, id) {
        this.activeTab = index
        this.$emit('tabChange', index, id)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .header{
    .logo {
      width: 190px;
      height: 30px;
      margin-left: 30px;
    }

    .search-btn {
      width: 690px;
      height: 66px;
      // background: rgba(255, 255, 255, 1);
      // border-radius: 33px;
      margin-top: 29px;
      display: flex;
      margin-left: 30px;
      flex-direction: row;
      align-items: center;

      .search-icon {
        width: 36px;
        height: 36px;
        margin-left: 33px;
      }

      .search-word {
        font-size: 26px;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        // color:#333333;
        margin-left: 10px;
      }
    }
    .tabs-nav{
      margin-top: 20px;
      margin-left: 30px;
      .ul{
        display: flex;
        overflow: hidden;
        width: 100%;
        .li{
          flex: 1 0 auto;
          margin-left: 36px;
          font-size: 30px;
          color: #333333;
          position: relative;
          padding-bottom: 18px;
          &:first-child{
            margin-left: 0;
          }
          &.on{
            color:#00D6B1;
            &:after{
              content: '';
              width: 30px !important;
              height: 8px;
              background: url("../../static/img/Select.png") no-repeat center / 100% 100%;
              position: absolute;
              left: 50%;
              bottom: 0;
              transform: translate(-50%,-50%);
            }
            font-weight:bold;
          }
        }
      }
    }
  }
</style>
